<template>
  <div>
    <el-button type="button" size="small" v-on:click="toadd" plain>增加</el-button>
    <el-button type="button" size="small" v-on:click="tz" plain>跳转简介管理</el-button>
<!--    <el-button type="button" size="small" v-on:click="myselect" plain>选中</el-button>-->
<!--  <table>-->
<!--    <tr>-->
<!--      <td>序号</td>-->
<!--      <td>标题</td>-->
<!--      <td>作者</td>-->
<!--      <td>内容</td>-->
<!--      <td>发布时间</td>-->
<!--      <td>类型表</td>-->
<!--      <td>操作</td>-->
<!--    </tr>-->
<!--    <tr v-bind:key="blog.bid" v-for="blog in list">-->
<!--      <td>{{blog.bid}}</td>-->
<!--      <td>{{blog.title}}</td>-->
<!--      <td>{{blog.author}}</td>-->
<!--      <td>{{blog.content}}</td>-->
<!--      <td>{{blog.publishdate}}</td>-->
<!--      <td>{{blog.tid==1?"文学":"散文"}}</td>-->
<!--      <td>-->
<!--        <el-button type="primary" @click="del(blog.bid)">删除</el-button>-->
<!--        <el-button type="primary" @click="toupdate(blog.bid)">修改</el-button>-->
<!--      </td>-->
<!--    </tr>-->
<!--  </table>-->
    <template>
      <el-table
        :data="list"
        stripe
        style="width: 100%">
        <el-table-column
          prop="bid"
          type="selection"
          label="序号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="author"
          label="作者">
        </el-table-column>
        <el-table-column
          prop="content"
          label="内容">
        </el-table-column>
        <el-table-column
        prop="publishdate"
        label="发布时间">
      </el-table-column>
        <el-table-column
          prop="tid"
          label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.tid==0">文学</span>
            <span v-if="scope.row.tid==1">散文</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="del(scope.row.bid)">删除</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="toupdate(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div v-if="addViwe">
<!--      用户id:{{blog.bid}}<br>-->
<!--      标题:<input type="text" v-model="blog.title"><br>-->
<!--      作者:<select v-model="blog.author"><br>-->
<!--      <option value="">请选择</option>-->
<!--      <option v-bind:key="a" v-for="a in authorlist" v-bind:value="a" v-bind:label="a"></option>-->
<!--    </select><br>-->
<!--      内容:<input type="text" v-model="blog.content"><br>-->
<!--      发布时间:<input type="date" v-model="blog.publishdate"><br>-->
<!--      类型:<input type="radio" v-model="blog.tid" value="1">文学-->
<!--      <input type="radio" v-model="blog.tid" value="2">散文<br>-->
      <el-form ref="form" :model="blog" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="blog.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="blog.author" placeholder="请选择作者">
            <el-option v-for="a in authorlist" v-bind:key="a.id" v-bind:value="a.id" :label="a.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="blog.publishdate" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="blog.content"></el-input>
        </el-form-item>
        <el-form-item label="图书类型">
          <el-radio v-model="blog.tid" v-bind:key="t.id" v-for="t in tidlist" :label="t.id">{{t.name}}
          </el-radio>
        </el-form-item>
        <el-button type="primary" @click="add">立即创建</el-button>
        <el-button @click="no">重置</el-button>
      </el-form>
    </div>
    <div v-if="updateView">
      用户id:{{blog.bid}}<br>
      <el-form ref="form" :model="updateView" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="blog.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="blog.author" placeholder="请选择作者">
            <el-option v-for="a in authorlist" v-bind:key="a.id" v-bind:value="a.id" :label="a.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="blog.publishdate" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="blog.content"></el-input>
        </el-form-item>
        <el-form-item label="图书类型">
          <el-radio-group v-model="blog.tid">
            <el-radio v-for="t in tidlist" v-bind:key="t.id" v-bind:value="t.id" :label="t.id">{{t.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button type="primary" v-on:click="update">修改</el-button>
        <el-button v-on:click="noupdate">取消</el-button>
      </el-form>
    </div>
</div>
</template>

<script>
export default {
  name: 'SttView',
  data () {
    return {
      updateView: false,
      addViwe: false,
      authorlist: [{ id: 1, name: '罗贯中' }, { id: 2, name: '施耐庵' }, { id: 3, name: '张三三' }, { id: 4, name: '周树人' }],
      tidlist: [{ id: 1, name: '经济学详解' }, { id: 2, name: '军事详解' }, { id: 3, name: '反射详解' }, { id: 4, name: 'Mybatis详解' }],
      blog: {
        bid: 0,
        title: '',
        author: [],
        content: '',
        publishdate: '',
        tid: 0
      },
      list: [{
        bid: 1,
        title: '啦啦啦',
        author: 'myClass',
        content: '张三三',
        publishdate: '2018-09-12',
        tid: 5
      }]
    }
  },
  methods: {
    update () {
      this.axios.post('/blog/update', this.blog).then(res => {
        if (res.data.code === 200) {
          alert('修改成功')
          this.query()
        } else {
          alert('修改失败' + res.data.code)
        }
      })
      this.updateView = false
    },
    toupdate (blog) {
      this.updateView = true
      this.blog = JSON.parse(JSON.stringify(blog))
    },
    noupdate () {
      this.updateView = false
    },
    toadd () {
      this.addViwe = true
    },
    add () {
      this.axios.post('/blog/add', this.blog).then(res => {
        if (res.data.code === 200) {
          this.$message.success('保存成功')
          this.$router.push('list')
          this.query()
        } else {
          this.$message.error('保存失败')
        }
      })
      this.addViwe = false
    },
    no () {
      this.addViwe = false
    },
    tz () {
      this.$router.push('/Stu')
    },
    del (bid) {
      this.axios.get('/blog/del', { params: { id: bid } }).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code === 200) {
          alert('删除成功')
          this.query()
        } else {
          alert('删除失败' + res.data.code)
        }
      })
    },
    query () {
      // this.axios.get('/blog/list', {
      //   params: {
      //     page: 1,
      //     pageSize: 20
      //   }
      // }).then(res => {
      //   this.list = res.data
      // })
      this.axios.get('/blog/list', {
        page: 1,
        pageSize: 20
      }).then(res => {
        this.list = res.data
      })
    }
  },
  created () {
    this.query()
  }
}
</script>
<style scoped>

</style>
